<template>
	<div class="node-page">
		<div v-if="loading"
		     class="center-container abs-full">
			<div>
				<Spin size="large"></Spin>
			</div>
		</div>
		<template v-else-if="nodeModel && nodeModel.facets">
			<Tabs class="node-tabs"
			      v-model="sectionShow"
			      v-if="nodeModel.facets.length>1">
				<Tab-pane v-for="(facet,index) in nodeModel.facets"
				          :key="index"
				          :label="facet.name">
					<component @updateMark="refreshUpdateMark(index)"
					           @update="facetUpdate(index)"
					           @updateStatus="updateStatus($event,index)"
					           :statusData="pageData && pageData.facets && pageData.facets[index]"
					           :module="'nf_'+facet.code+'_'+index"
					           :is="facetComponent(facet)"
					           :node-model="facet.model"
					           :model="facet.model"
					           :ref="'facet_'+index"
					           :unselect="unselect"
					           v-if="sectionLoad[index]"></component>
				</Tab-pane>
			</Tabs>
			<component v-else
			           :is="facetComponent(nodeModel.facets[0])"
			           @updateStatus="updateStatus($event)"
			           :statusData="pageData"
			           :model="nodeModel.facets[0].model"
			           :unselect="unselect"
			           :node-model="nodeModel.facets[0].model"></component>
		</template>
	</div>
</template>

<script>
import GridPanel from '@/node/gridPanel/index';
import ResourceMapping from '@/node/resourceMapping/index';
import TreeView from '@/node/treeView/index';
import Dev from '@/node/dev/index';

import SectionLoad from 'mixins/sectionLoad';
import { nodeParser } from '@/common/parser';
import $ from '@/common';
import Extra from './extra';
import Custom from './custom';

export default {
	name: 'nodeFactory',
	mixins: [SectionLoad],
	props: {
		model: {},
		datasetCode: {},
		isDs: {},
		isNf: {},
		isView: {},
		nodeCode: {},
	},
	data() {
		return {
			nodeModel: {},
			updateMark: [false],
			loading: true,
			customType: null,
			typeComponent: {
				gp: 'GridPanel',
				xgp: 'xGridPanel',
				rm: 'ResourceMapping',
				tv: 'TreeView',
				db_console: 'Dbconsole',
				business_case: 'BusinessCase',
				performance_analysis: 'DashBoard',
				performance_analysis_asset_tenantry: 'DashBoard',
				dev: 'Dev',
				db: 'DashBoard',
			},
		};
	},
	computed: {
		pageData() {
			var page = this.$store.getters.activePageData;
			return page && page.data;
		},
		//数据不可选中判断，临时处理，待优化
		unselect() {
			return (
				this.nodeCode &&
				this.$store.getters.activePageData &&
				this.$store.getters.activePageData.parent_code === 'cs_business' &&
				this.nodeCode.indexOf('case') > 0
			);
		},
	},
	watch: {
		//页签切换时进行更新状态的判断
		sectionShow(index) {
			this.$store.commit('updatePageStatus', {
				data: { tab: index },
				code: this.nodeCode,
			});
			if (this.sectionLoad[index] && this.updateMark[index] && this.model.facets[index]) {
				this.updateFacet(index);
			}
			this.redrawFacet(index);
		},
	},
	methods: {
		facetComponent(model) {
			var type = model.type || model.model.type || 'gp';
			return this.customType || this.typeComponent[type] || this.typeComponent.gp;
		},
		//刷新数据更新状态
		refreshUpdateMark(index) {
			for (let i in this.model.facets) {
				if (i !== index) {
					this.updateMark[i] = true;
				}
			}
			//当回调完成时，用户不在触发更新的页签时，则同时触发当前页面的更新（真是贴心的设置）
			if (index !== this.sectionShow) {
				this.updateFacet(this.sectionShow);
			}
		},
		updateStatus(e, index = null) {
			this.$store.commit('updatePageStatus', {
				data: e,
				code: this.nodeCode,
				index,
			});
		},
		facetUpdate(index) {
			this.updateMark[index] = false;
		},
		updateFacet(index) {
			var code = `nf_${this.model.facets[index].code}_${index}`;
			if (this.$store.state.page[code]) {
				this.$store.dispatch(`page/${code}/fetch`);
			}
		},
		redrawFacet(index) {
			var item = this.$refs['facet_' + index];
			if (item) {
				item = item[0] || item;
				if (item.redraw) {
					item.redraw();
				}
			}
		},
		parseModel(data) {
			var model = $.copyJson(data);
			if (!model.facets) {
				model = {
					facets: [{ model }],
				};
			}
			if (this.isNf || data.facets) {
				model = nodeParser(data, Extra.list[this.nodeCode], this.datasetCode);
			}
			return model;
		},
	},
	created() {
		this.loading = true;
		if (Custom.list[this.model.type] && !this.isView) {
			var type = this.model.type;
			this.nodeModel = this.parseModel(this.model);
			this.$options.components[type] = Custom.getter(type);
			this.loading = false;
			this.customType = type;
		} else {
			this.nodeModel = this.parseModel(this.model, Extra.list[this.nodeCode], this.datasetCode);
			if (this.isNf) {
				//扩展model
				//临时设置 针对第一个facet
				if (Extra.list[this.nodeCode] && !this.isView) {
					Extra.getter(this.nodeCode).then(data => {
						$.setObj(this.nodeModel.facets[0].model, data);
						this.loading = false;
					});
				} else {
					this.loading = false;
				}
			} else {
				this.loading = false;
			}
		}
		if (this.nodeModel.facets && this.nodeModel.facets.length) {
			for (let i in this.nodeModel.facets) {
				this.updateMark[i] = false;
				this.sectionMapping[this.nodeModel.facets[i].code] = i;
			}
		}
		this.$store.commit('setPageModel', {
			data: this.nodeModel,
			code: this.nodeCode,
		});
		if (this.pageData && this.pageData.tab) {
			this.sectionShow = this.pageData.tab;
		}
	},
	components: {
		GridPanel,
		TreeView,
		Dev,
		xGridPanel: () => import('@/node/x_gridPanel/index'),
		Dbconsole: () => import('@/node/dbConsole/index'),
		BusinessCase: () => import('@/node/businessCase/index'),
		ResourceMapping,
		DashBoard: () => import('@/node/dashBoard/index'),
	},
};
</script>

<style lang="less">
.node-tabs.ivu-tabs {
	overflow: visible;
	height: 100%;
	display: flex;
	flex-direction: column;
	> .ivu-tabs-bar {
		margin-bottom: 10px;
	}
	> .ivu-tabs-content {
		flex: 1;
		margin-top: -10px;
		margin-bottom: -10px;
	}
}
</style>
